<template>
	<view class="pages">
		<view class="" style="height: 140rpx;">
			  <u-navbar
		            title="支付订单"
		            @leftClick="leftClick"
		            :autoBack="false"
		        >
		        </u-navbar>
		</view>
		
		<view class="header " style="background: #fff;">
			<view class="header-text">
				支付金额
			</view>
			<view class="header-num py-[20rpx]">
				<text class="text-[40rpx]">￥</text>
				<text class="">{{mode.totle}}</text>
				<!-- ￥{{dataes.totalPrice}} -->
			</view>
			<view class="header-time">
			<view class="">
				支付剩余时间   
			</view>
				<u-count-down v-if="minutes == NaN" :time="15 * 60 * 1000" format="mm:ss">
				</u-count-down>	
				<view v-if="minutes != NaN" style="color:#FE861C;margin-top: 2rpx;">
					<text style="">{{minutes}}:{{seconds}}</text>
				</view>
			</view>
		</view>
		<!-- 支付方式 -->
		<view class="applytype">
			<view class="applytype-1">
				支付方式
			</view>
			<view class="applytype-2">
				{{mode.patType == 1?'微信支付':'余额支付'}}
			</view> 
		</view>
		    
		<view class="" @click="nowPay" style="padding: 0 20rpx;">
			<up-button color="#FE861C"  shape="circle" :customStyle="{height:' 96rpx',borderRadius:'20rpx'}">立即支付</up-button>
		</view>
		
		<liu-keyboard-password  ref="popupPass" isPwInput @change="getPayPwd"
		  :change.sync='payPwd' ></liu-keyboard-password>
		  
		  <u-modal :show="showModal" :title="Modaltitle" :content='Modalcontent' :showCancelButton='true'
		  	@confirm='confirmAdd()' @cancel='showModal = false'></u-modal>
	</view>
</template>

<script setup>
	import Md5 from "js-md5"
	import {
		ref,
		reactive,
		computed
	} from 'vue'
	import dayjs from 'dayjs';
	import {newpay,balancePay,oredrDitils,weChatpay} from "@/api/order.js"
	import {onLoad,onShow,onUnload,} from '@dcloudio/uni-app';
	onShow(()=>{
		
	})
	onLoad((e)=>{
		
		mode.value = e
		createdAt.value = e.createdAt
		console.log("e3",createdAt.value);
	})
	const leftClick = ()=>{
		uni.switchTab({
			url:'/pages/order/order'
		})
	}
	const payStatus = ref()
	const showModal = ref(false) //退出窗口
	const Modaltitle = ref('提示') //退出窗口标题
	const Modalcontent = ref('您还未设置支付密码，是否立即前往设置支付密码？') //退出窗口内容
	const min = ref()
	const sec = ref()
	const createdAt = ref('')
	const mode = ref({
		orderId: "",
		patType: "",
		totle: "",
	})
	const popupPass = ref(null) //密码框
	const password = ref() //密码框
	//立即支付
	const nowPay = ()=>{
		// oredrDitils({orderId:mode.value.orderId}).then(res=>{
		// payStatus.value = res.result.orderInfo.payStatus
		if(payStatus.value == 2){
			uni.showToast({
				title:'订单超时',
				icon:'none'
			})
			uni.switchTab({
				url:'/pages/index/index'
			})
		}
		else{
			if(mode.value.patType == 1){ //微信
					weChatpay({
								orderId:mode.value.orderId,
							}).then(res=>{
								if(res.code == 200){
								let data = res.result
								// console.log("微信支付",res);
								uni.requestPayment({
									provider: 'wxpay', //支付类型-固定值
									timeStamp: data.timeStamp, // 时间戳（单位：秒）
									nonceStr: data.nonceStr, // 随机字符串
									package: data.package, // 固定值
									signType: data.signType, //固定值
									paySign: data.paySign, //签名
									success: function(res){ 
										uni.showToast({
											icon:'none',
											title:'支付成功'
										})	
										uni.navigateTo({
											url:'/page_order/submitanorder/payment/paySuccess/paySuccess?totle=' + mode.value.totle + '&orderId=' + mode.value.orderId
										})
									},
									fail:function(err){
											uni.showToast({
												icon:'none',
												title:'支付失败'
										})
									}
								})
								}
							})
				
			}else{ //余额
			oredrDitils({orderId:mode.value.orderId}).then(res=>{
			payStatus.value = res.result.orderInfo.payStatus
			if(payStatus.value == 2){
				uni.showToast({
					title:'订单超时',
					icon:'none'
				})
				uni.switchTab({
					url:'/pages/index/index'
				})
			}else{
				popupPass.value.open() //打开密码框
			}
				 console.log("当前订单详情",payStatus.value);
				})
		}
		}
			
			// })
		
	}
	
	//打开密码输入键盘
	const getPayPwd = (e)=>{
		password.value = e
		console.log("密码",e);
		balancePay({
			orderId:mode.value.orderId,
			payPassword:Md5(e)
		}).then(res=>{
			if(res.code == 200){
				uni.navigateTo({
					url:'/page_order/submitanorder/payment/paySuccess/paySuccess?totle=' + mode.value.totle + '&orderId=' + mode.value.orderId
				})
			}else{
				if(res.code == 1007){
					showModal.value = true
				}
			}
			console.log("支付结果",res);
		})
	}
	
const confirmAdd = () => {
		uni.navigateTo({
			url: '/page_my/myInfo/addpassword/addpassword?PayPwd=' + 3
		})
		showModal.value = false
	}
	 onUnload(()=>{
		 // uni.navigateBack(-3)
		//如果多端发布的话判断一下当前操作的客户端
		//#ifdef MP-WEIXIN
		wx.switchTab({
			url: '/page_order/orderDetalis/orderDetalisNomap/orderDetalisNomap?orderNo=' + mode.value.orderId   
		})
		//#endif 
	 }) 

	setTimeout(()=>{
		console.log("createdAt",createdAt.value);
		
		// 后端传来的时间字符串
		// let backendTime = '2024-02-02 16:10:39'
		
		// 将后端时间转换为Date对象
		let targetTime = new Date(createdAt.value.replace(/-/g,'/')+'');
		
		// 在目标时间上增加15分钟
		targetTime.setMinutes(targetTime.getMinutes() + 15);
		
		// 获取当前时间
		let currentTime = new Date();
		
		// 计算时间差（单位：毫秒）
		let timeDiff = targetTime.getTime() - currentTime.getTime();
		 console.log("计算时间差",timeDiff);
		 let countdown = setInterval(function() {
		   // 获取当前时间
		   let now = new Date();
		 console.log("当前时间",now)
		   // 计算剩余时间差（单位：毫秒）
		   let remainingTime = targetTime.getTime() - now.getTime();
		 
		   // 倒计时结束
		   if (remainingTime <= 0) {
		     clearInterval(countdown);
		     console.log("倒计时结束");
		     return;
		   }
		 
		   // 计算剩余时、分、秒
		   let minutes = Math.floor((remainingTime / (1000 * 60)) % 60);
		   let seconds = Math.floor((remainingTime / 1000) % 60);
		 
		  // min.value = Math.floor((remainingTime / (1000 * 60)) % 60);
		  // sec.value =  Math.floor((remainingTime / 1000) % 60);
		   // 输出倒计时时间
		    min.value = minutes.toString().padStart(2, '0');
		    sec.value = seconds.toString().padStart(2, '0');
		   console.log(`倒计时：${minutes} 分钟 ${seconds} 秒`);
		 }, 1000);
	},500)
	
	// 计算属性
	const minutes = computed(()=>{  //增加门店后的数量
		return  min.value
	})
	const seconds = computed(()=>{  //增加门店后的数量
		return  sec.value
	})
	


</script>
<style lang="scss">
.pages{
	padding: 20rpx;
}
.applytype{
	margin: 20rpx 0 60rpx 0;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 33rpx 20rpx;
	display: flex;
	justify-content: space-between;
	.applytype-1{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
	}
	.applytype-2{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
	}
}
.header{
	background-color: #fff;
	border-radius: 20rpx;
	padding: 58rpx 0;
	text-align: center;
	margin-top: 40rpx;
	
	.header-text{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #1D1D1D;
	}
	.header-num{
		font-size: 54rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
	}
	.header-time{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #737373;
	}
}
</style>
